<template>
    <div>
        <div class="back">
            <div>
                <van-nav-bar title="账户信息" left-arrow class="vant_head" @click-left="onClickLeft" right-text="注销账号"
                    @click-right="onClickRight" />
                <!-- 弹框是否显示 -->
                <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '45%' }">
                    <h2
                        style="text-align: center;line-height: 3.5rem;width: 100%;border-bottom: 0.0625rem solid #ccc;font-size: 1.3rem;">

                        上传图片</h2>
                    <div @click="takePhoto"
                        style="width: 50%;height: 3rem;background-color: #48ce55;position: absolute;top: 6rem;left: 6rem;">
                        <video ref="video" autoplay playsinline></video>
                        <video id="camera-video" autoplay playsinline style="width: 300px; height: 200px;position: absolute;left: -42px;z-index: 9999;top: 180px;"></video>
                        <canvas id="canvas" style="width: 100px; height: 100px"></canvas>
                        <a id="downloadLink" download="captured-photo.jpg" href="#"></a>
                        <img src="../../assets/相机.png" alt="" style="position: absolute;left: 25px;">
                        <button @click="addphoto" style="position: absolute;top: 0;height: 40px;line-height: 50px;background-color: #48ce55;border: none;color: white
                        ">拍照</button>
                    </div>
                    <div
                        style="width: 50%;height: 3rem;background-color: #48ce55;position: absolute;top: 10rem;left: 6rem;">
                        <img src="../../assets/file.jpg" alt=""
                            style="width: 1.25rem;height: 1.25rem;position: absolute;left: 2rem;top: 0.8rem;">
                        <label for="filess"
                            style="line-height: 3rem;text-align: center;left: 4rem;position: absolute;color: white">从相册中选取</label>
                        <input type="file" id="filess" @change="handleClicks" style="display: none" ref="fileInput"
                            accept="image/*" />

                    </div>
                    <div style="width: 50%;height: 3rem;background-color: #d7c9be;position: absolute;top: 14rem;left: 6rem;color: white;text-align: center;line-height: 3rem;"
                        @click="Showguan">取消</div>
                </van-popup>
            </div>
            <div class="toPic">
                <div class="img">
                    <h3 style="height: 3.75rem;line-height: 6.25rem;left: 1.25rem;position: absolute;">头像</h3>
                    <img :src="userInfo.avatar" alt="" srcset="" style="position: absolute;right: 2.5625rem;width: 3.8975rem;height: 3.8975rem; border-radius: 50%;
                    top: 1rem;" @click="showbum">

                    <span style="position: absolute;right: 1rem;line-height: 6.25rem;color: #eee;">></span>
                </div>
                <div class="imgs" @click="ToUpdate">
                    <h3 style="height: 3.75rem;line-height: 5rem;left: 1.25rem;position: absolute;">昵称</h3>
                    <span style="position: absolute;right: -1.5625rem;width: 6.8975rem;height: 3.8975rem; border-radius: 50%;
                    top: 1rem;line-height: 3rem;">{{ userInfo.nickname }}</span>
                    <span style="position: absolute;right: 1rem;line-height: 6.25rem;color: #eee;">></span>

                </div>
                <div class="imgss">
                    <h3 style="height: 3.75rem;line-height: 5rem;left: 1.25rem;position: absolute;">手机号</h3>
                    <span style="position: absolute;right: 1.5625rem;width: 3.8975rem;height: 3.8975rem; border-radius: 50%;
                    top: 1rem;line-height: 3rem;">{{ userInfo.username.replace(/(\d{3})\d{4}(\d{4})/,
                        "$1****$2") }}</span>
                </div>
            </div>
        </div>
        <div>
        </div>
    </div>
</template>


<script setup lang="ts">

import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios';
const router = useRouter()
const imageUrl = ref(
    ''
)
const addphoto = () => {
    const video = document.getElementById('camera-video')
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')
    console.log(ctx)
    ctx.drawImage(video, 0, 0, canvas.width, (canvas.height = video.videoHeight))
    const dataURL = canvas.toDataURL('image/jpeg')
    const downloadLink = document.getElementById('downloadLink')
    downloadLink.href = dataURL
    imageUrl.value = dataURL
    localStorage.setItem('imageUrl', imageUrl.value)
    console.log(imageUrl.value)
    userInfo.value.avatar = imageUrl.value

}
// 父子组件传参    ref 和reactive 
// watch 和computed

const takePhoto = () => {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices
            .getUserMedia({ video: true })
            .then(function (stream: any) {
                const video = document.getElementById('camera-video')
                video.srcObject = stream
                video.play()
            })
            .catch(function (error) {
                if (error.name === 'NotAllowedError') {
                    console.log('用户拒绝了摄像头权限，请在浏览器设置中允许访问摄像头')
                } else {
                    console.log('获取摄像头视频流出现其他错误: ', error)
                }
            })
    } else {
        console.log('此浏览器不支持访问相机')
    }
}
const onClickRight = () => {
    console.log(111);
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    router.push({ path: '/my' })
}
const ToUpdate = () => {
    router.push({ path: '/update' })
}
//本地存储获取用户信息
const userInfo = ref<any>(JSON.parse(localStorage.getItem('userInfo')));
console.log(userInfo.value);
const imagess = ref('');
//底部弹出框
const showBottom = ref(false)
//点击头像
const showbum = () => {
    showBottom.value = true;
}
//返回我的页面
var onClickLeft = () => {
    console.log(1111);
    router.push({ path: '/my' })
}
// 按钮关闭
const Showguan = () => {
    showBottom.value = false;
}

const fileInput = ref();
//文件上传
const handleClicks = () => {
    const file = fileInput.value.files[0];
    console.log(file);
    if (file) {
        const reader = new FileReader();
        reader.onload = (e: any) => {
            console.log(e.target.result);
            console.log(userInfo.value);
            userInfo.value.avatar = e.target.result;
            console.log(userInfo.value.avatar);
            localStorage.setItem('userInfo', JSON.stringify(userInfo.value));

        }
        reader.readAsDataURL(file);
        console.log(file);
    }
}

</script>

<style lang="scss" scoped>
.back {
    width: 100%;
    height: 3.125rem;
}

input[type="file"] {
    visibility: hidden;
    width: 0;
    height: 0;
}

.toPic {
    width: 100%;
    height: 62.5rem;
    position: relative;
    background-color: #f1f1f1;
    top: 1rem;
}

.img {
    width: 100%;
    height: 6.25rem;
    background-color: white;
    border-bottom: 7px solid #eee;
    position: absolute;
}

.imgs {
    width: 100%;
    height: 5.25rem;
    line-height: 3rem;
    background-color: white;
    border-bottom: 7px solid #eee;
    position: absolute;
    top: 5.9rem;
}

.imgss {
    width: 100%;
    height: 5.25rem;
    line-height: 3rem;
    background-color: white;
    border-bottom: 7px solid #eee;
    position: absolute;
    top: 10.8rem;
}

:deep(.van-icon) {
    color: #63c38a !important
}

:deep(.van-nav-bar__text) {
    color: #63c38a !important
}

:deep(.van-uploader__input) {
    width: 25% !important;
    height: 25%;
    background-color: #63c38a !important;
}

input[type="file"] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    width: 200px;
}
</style>